<template>
	<view class="rowbox wdh-100 spb als newscontent">
		<view class="columnbox" style="width: 50%;">
			<view class="columnbox one-info" v-for="(item,index) in leftlist" :key='index' @click="showDetail(item.id)">
				<image :src="item.pic" mode="aspectFill" class="info-img"
					:style="{'width':item.width+'rpx','height':item.height+'rpx'}"></image>
				<view class="columnbox wdh-100 info-content">
					<view class="info-name wdh-100 textovflow">{{item.name||'无'}}</view>
				</view>
			</view>
		</view>
		<view class="columnbox" style="width: 50%;">
			<view class="columnbox one-info" v-for="(item,index) in rightlist" :key='index'
				@click="showDetail(item.id)">
				<image :src="item.pic" mode="aspectFill" class="info-img"
					:style="{'width':item.width+'rpx','height':item.height+'rpx'}"></image>
				<view class="columnbox wdh-100 info-content">
					<view class="info-name wdh-100 textovflow">{{item.name||'无'}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				leftlist: [],
				rightlist: [],
				leftheight: 0,
				rightheight: 0,
				moreflag: true,
			};
		},
		mounted() {
			this.getNews()
		},
		methods: {
			showDetail(id) {
				uni.navigateTo({
					url: '/pages/index/news/detail?id=' + id
				})
			},
			loadMoreData() {
				if (this.moreflag) {
					this.page++
					this.getNews()
				}
			},
			getNews() {
				this.$req.post('/user/news', {
					page: this.page,
					pageSize: 20
				}).then(res => {
					this.initData(res.data)
					this.moreflag = res.data.length == 20 ? true : false
				})
			},
			async initData(res) {
				for (var i = 0; i < res.data.data.length; i++) {
					let list = []
					if (res.data.data[i].video == '') {
						list = await this.getImgInfo(res.data.data[i].images.split(',')[0])
					} else {
						list = await this.getImgInfo(res.data.data[i].video +
							'?x-oss-process=video/snapshot,t_30000,f_jpg,w_0,h_0,m_fast,ar_auto')
					}

					console.log(list)

					res.data.data[i].width = list[0]
					res.data.data[i].height = list[1]
					if (res.data.data[i].width == res.data.data[i].height) {
						res.data.data[i].width = 340
						res.data.data[i].height = 340
					} else {
						res.data.data[i].width = 340
						res.data.data[i].height = 510
					}
					if (res.data.data[i].video == '') {
						res.data.data[i].pic = res.data.data[i].images.split(',')[0].split('?')[0]
					} else {
						res.data.data[i].pic = res.data.data[i].video +
							'?x-oss-process=video/snapshot,t_3000,f_jpg,w_0,h_0,m_fast,ar_auto'
					}
					if (this.leftheight <= this.rightheight) {
						this.leftlist.push(res.data.data[i])
						this.leftheight += res.data.data[i].height
					} else {
						this.rightlist.push(res.data.data[i])
						this.rightheight += res.data.data[i].height
					}
				}
			},
			getImgInfo(url) {
				return new Promise((reslove, reject) => {
					if (url.split('?width').length > 1) {
						let list = [url.split('?width=')[1].split('&')[0], url.split('&height=')[1]]
						reslove(list)
					} else {
						reslove([340, 490])
						// uni.getImageInfo({
						// 	src: url.replace(/http:/g, "https:"),
						// 	success: (img) => {
						// 		reslove([img.width, img.height])
						// 	},
						// 	fail(err) {}
						// })
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.newscontent {
		// background: #F0F2F5;
		padding: 20rpx 20rpx;

		.one-info {
			width: 340rpx;
			margin-bottom: 20rpx;
			background: #fff;
			border-radius: 10rpx;
		}

		.info-img {
			border-radius: 10rpx 10rpx 0 0;
		}

		.info-content {
			padding: 14rpx 8rpx;
		}

		.info-name {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.user-info {
			margin-top: 20rpx;

			.user-img {
				width: 32rpx;
				height: 32rpx;
				border-radius: 100rpx;
				margin-right: 10rpx;
			}

			.user-name {
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #969696;
				max-width: 100rpx;
			}
		}

		.like-num {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #C3C3C3;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-left: 10rpx;
			}
		}
	}
</style>